
<template>
  <div class="login-bg">
    <div class="login-container">
      <img alt="" style="width: 40.74vw;height: 60vh;" src="../../assets/img/login/login5/orangeBg2.png"/>
      <div class="right-con">
        <div class="tit">
          {{ title }}
        </div>
        <div class="line-box" :style="{marginBottom:errorTime >= 3?'2.521vw':'4.521vw'}"><span class="line"></span></div>

        <el-form
          ref="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
          label-position="top"
          :model="loginForm"
          hide-required-asterisk
        >
          <el-form-item label="用户名" prop="username" class="label-box" >
            <div class="deep-input">
              <el-input
                ref="username"
                v-model="loginForm.username"
                placeholder="请输入用户名"
                name="username"
                type="text"
                tabindex="1"
                autocomplete="on"
                class="input-box"
              />
            </div>

          </el-form-item>
          <el-form-item label="密码" prop="password" class="label-box">

            <el-tooltip v-model="capsTooltip" content="大写键已打开" placement="left" trigger="focus">
              <el-input

                :key="passwordType"
                ref="password"
                v-model="loginForm.password"

                :type="passwordType"
                placeholder="请输入密码"
                name="password"
                tabindex="2"
                autocomplete="on"
                @keyup="checkCapslock"
                @blur="capsTooltip = false"
                @keyup.enter="handleLogin"
              >
                <template #suffix>
                  <div class="icon">
                    <svg-icon :icon-class="passwordType === 'password' ? 'ui-eye' : 'ui-hide'" color="gray" @click="showPwd"/>
                  </div>

                </template>
              </el-input>
            </el-tooltip>

          </el-form-item>
          <el-form-item v-if="errorTime >= 3" label="验证码" prop="identify" class="label-box">

            <el-row style="height: 60px">
              <el-col :span="18">
                <el-input
                  ref="username"
                  v-model="loginForm.identify"
                  prefix-icon="Postcard"
                  placeholder="验证码"
                  name="identify"
                  type="text"
                  tabindex="3" />
              </el-col>
              <el-col :span="6" style="line-height:3.125vw">
                <indentify ref="identify" :identify-code="identifyCode" :content-width="80" @click="makeCode" />
              </el-col>
            </el-row>
          </el-form-item>

          <el-button
            class="login-btn"
            :loading="loading" type="primary"
            @click="handleLogin">
            登录
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mixin } from './mixin'

export default {
  name: 'Login5',
  mixins: [mixin]
}
</script>
<style scoped lang="scss">
.el-form {
  position: relative;
  margin-right: 0;
  margin-left: 0;

  .login-btn{
    position: absolute;
    bottom: -10.5vh;
    z-index: 102;
  }
}

.login-bg{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: url("@/assets/img/login/login5/orangeBg1.png");

  .login-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 82.8125vw;
    height: 80.0625vh;
    padding:0 5.771vw;
    background: white;
    border-radius: 20px;

    .right-con{
      box-sizing: border-box;
      width: 30vw;
      height:24.615vw;
      margin-bottom: 5.208vw;
      padding: 0 2.604vw ;
      background-color: transparent;
      border-radius: 0.521vw;

      .destion{
        position: absolute;
        top: 0;
        left: 0;
        width: 29.948vw;
        height: 0.26vw;
        background-color: #1762F2;
        border-radius:0.521vw 0.521vw 0 0 ;
      }

      .tit {
        //margin: 2.604vw 0;
        color: #fd6906;
        font-weight: 500;
        font-size: 1.667vw;
        text-align: center;
      }

      .line-box{
        display: flex;
        justify-content: center;

        .line{
          display: block;
          width: 1.396vw;
          height: 0.321vw;
          margin-top: 0.469vw;
          background: #faa555;
          border-radius: 0.26vw;
        }
      }

      .el-form--label-top .el-form-item :deep(.el-form-item__label)  {
        margin-bottom: 1.094vw;
        color: #b7b7b7;
        font-weight: 600 !important;
        font-size: 0.781vw !important;
        letter-spacing: 0.313vw;
        // margin-top: 2.344vw;
      }

      .icon{
        svg{
          width: 1.302vw !important;
          height: 1.719vw !important;
        }

      }

      :deep(.el-icon svg) {
        width: 1.042vw;
        height: 1.198vw;
      }

      .login-form {
        .label-box{
          margin-bottom: 2.344vw;
        }

        :deep(.el-button){
          width: 100%;
          height: 3.125vw;
          color: #FFF;
          font-weight: 500;
          // border-radius: 2.083vw;
          font-size: 0.781vw;
          font-family: PingFangSC-Semibold, "PingFang SC";
          background:linear-gradient(to right, #f5991e, #fd6905) !important;
          border: none;
          box-shadow: 0 0 1.146vw 0 rgb(23 98 242 / 21%);
          // letter-spacing: 0.521vw;
        }

        .el-input__inner{
          border-color: black;
          border-width: 0 0 0.052vw;
        }

        :deep(.el-input__inner) {
          font-weight: 500;
          font-size: 1.042vw;
          font-family: PingFangSC-Medium, "PingFang SC";
          line-height: 1.458vw;

        }

        .el-form-item__content{
          .el-input{
            height: 3.125vw;
            border-radius:0;

            :deep(.el-input__wrapper){
              border-bottom: 0.104vw solid #ccc;
              border-radius: 0 !important;
              box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
            }
          }
        }

      }
    }
  }
}
</style>
